<template>
	<view class="news">
		<view>
			<swiper catchtap="onSwiperTap" indicator-dots="true" interval="5000" autoplay="true">
				<swiper-item>
					<image src="../../static/images/wx.png" data-postId="4"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/images/vr.png" data-postId="5"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/images/iqiyi.png" data-postId="6"></image>
				</swiper-item>
			</swiper>

			<block v-for="(item,index) in newsList">
				<view @click="onPostTap(item.newsId)">
					<news-itme :newInfo="item"></news-itme>
				</view>
			</block>
		</view>
		<!--加载loadding-->
		<tui-loadmore :visible="param.loadding" :index="3" type="primary"></tui-loadmore>
		<tui-nomore :visible="!param.pullUpOn" bgcolor="#fff" text="没有更多新闻"></tui-nomore>
	</view>
</template>

<script>
	import newsItme from '../../components/news-item/news-item.vue';
	export default {
		components: {
			newsItme
		},
		data() {
			return {
				newsList: [],
				param: {
					page: 1,
					limit: 6,
					loadding: false,
					pullUpOn: true
				}
			};
		},
		onLoad() {
			uni.$on('newsInfo', (newsId) => {
				this.newsList.find(item => item.newsId == newsId).newsReading++;
			})
			uni.$on('collection', (newsId,flog) => {
				if(flog){
					this.newsList.find(item => item.newsId == newsId).newsCollection++;
				}else{
					this.newsList.find(item => item.newsId == newsId).newsCollection--;
				}
			})
			this.getNewsList()
		},
		methods: {
			getNewsList() {
				if (!this.param.pullUpOn) return;
				this.param.loadding = true
				this.$api.getNewsList({
					page: this.param.page,
					limit: this.param.limit
				}, res => {
					if (res.code) {
						this.newsList = res.data
						this.param.page++
						this.param.loadding = false;
					} else {
						this.param.loadding = false;
						this.param.pullUpOn = false
					}
				})
			},
			onPostTap(newsId) {
				this.$common.navigateTo('/pages/news-detail/news-detail?newsId=' + newsId)
			}
		},
		onReachBottom: function() {
			this.getNewsList()
		}
	}
</script>

<style lang="scss">
	.news {
		swiper {
			width: 100%;
			height: 600rpx;
		}

		swiper image {
			width: 100%;
			height: 600rpx;
		}
	}
</style>
